<template>
    <div class="box">
        <!-- 顶部搜索框 -->
        <div class="search">
            <el-input class="inputUser" v-model="name" placeholder="请输入行政区域名称"></el-input>
            <el-input class="inputNumber" v-model="code" placeholder="请输入行政区域编码"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="search">查找</el-button>
            <download-excel
              class="export-excel-wrapper"
              :data="DetailsForm"
              :fields="json_fields"
              :header="title"
              name="行政区域信息.xls"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <el-button type="primary" icon="el-icon-download" >导出</el-button>
              </download-excel>
        </div>
        <!-- 表格区域 -->
        <el-table
            class="elTable"
            :data="tableData"
            border>
            <el-table-column
            prop="id"
            label="区域ID"
            sortable
            width="120">
            </el-table-column>
            <el-table-column
            prop="pid"
            label="区域父ID"
            width="220">
            </el-table-column>
            <el-table-column
            prop="name"
            label="区域名称"
            >
            </el-table-column>
            <el-table-column
            prop="addressType"
            label="区域类型"
            width="220">
            </el-table-column>
            <el-table-column
            prop="code"
            label="区域编码"
            width="220">
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40,50,100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { regionList} from '@/api/shopping'
export default{
    name:'vipManage',
    props:[],
    data(){
        return{
            name:'',
            code:'',
            tableData:[],
            currentPage:1,
            limit:10,
            total:1,
            title:'行政区域信息',//excel表格标题
            json_fields: {
                "区域ID":'id',
                "区域父ID":'pid',
                "区域名称":'name',
                "区域类型":'addressType',
                "区域编码":'code',
            },
            DetailsForm: [],
        }
    },
    methods:{
        // 搜索按钮
        search(){ 
            console.log(this.currentPage);
            console.log(this.limit);
            regionList({
                page:this.currentPage,
                limit:this.limit,
                name:this.name,
                code:this.code,
 
            }).then(res=>{
            console.log(res);
            this.tableData=res.data.items
            this.total=res.data.total
            this.DetailsForm=res.data.items
            })
        },

        // 分页方法
        handleSizeChange(e){
            this.currentPage=1
            this.limit=e
            console.log(this.limit);
            regionList({
                page:this.currentPage,
                limit:this.limit,
                username:this.nickname,
                mobile:this.mobile,
            }).then(res=>{
            console.log(res);
            this.tableData=res.data.items
            this.total=res.data.total
            this.DetailsForm=res.data.items
            })
        },
        handleCurrentChange(e){
            this.currentPage=e
            regionList({
                page:this.currentPage,
                limit:this.limit,
                username:this.nickname,
                mobile:this.mobile,
            }).then(res=>{
            console.log(res);
            this.tableData=res.data.items
            this.total=res.data.total
            this.DetailsForm=res.data.items
            })
            
            console.log(this.currentPage);
        },
    },
    // mounted生命周期
    mounted(){
        regionList().then(res=>{
            console.log(res);
            this.tableData=res.data.items //赋值给表格内容数据渲染
            this.total=res.data.total  // 将总条数拿出来
            this.DetailsForm=res.data.items  // 导出表格需要的数据
            this.tableData.forEach(element => {
                element.addressType=element.type==3?'区':''
            });
        })
    },
    // 计算属性
    computed:{

    }
}
</script>
<style lang="less">
.box{
    padding-right: 40px;
    // 顶部查询框
    .search{
        margin-top: 20px;
        display: flex;
        justify-content: flex-start;
        .inputUser{
            width: 200px;
            margin-left: 20px;
        }
        .inputNumber{
            width: 200px; 
            margin: 0 10px;
        }
        .export-excel-wrapper{
            margin-left: 10px;
        }
    }
    // 表格内容
    .elTable{
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;
    }
    .cell{
        text-align: center;
    }
    // 分页
    .block{
        margin-left: 20px;
        margin-top: 30px;
    }
}

</style>